<template>
  <div class="page-list-live">
    <PageList>
      <template #header>进出场记录</template>
      <template #filter>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="人员进出场记录" name="peopleInOutLocation">
            <ListFilter :form="peopleFilter" :key-list="peopleList" @search="handleSearch" @reset="handleReset"></ListFilter>
          </el-tab-pane>
          <el-tab-pane label="车辆进出场记录" name="carInOutLocation">
            <ListFilter :form="carTopFilter" :key-list="carKeyList" @search="handleSearch" @reset="handleReset"></ListFilter>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #tips>
        <el-button icon="el-icon-delete" type="danger" @click="batchDeletion">批量删除</el-button>
      </template>
    </PageList>
    <component :is="activeName" ref="componentRef" @deleHandle="deleHandle"></component>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import ListFilter from '@/components/ListFilter'
  import { tunnelIORecord, department, work } from '@/api/api'
  export default {
    components: {
      ListFilter,
      carInOutLocation: () => import('./components/carInOutLocation'),
      peopleInOutLocation: () => import('./components/peopleInOutLocation')
    },
    mixins: [listMixin],
    data() {
      return {
        activeName: 'peopleInOutLocation',
        peopleList: [
          'employee.accessCardID',
          'employee.department.deptName',
          'employee.name',
          'employee.rfid',
          'employee.job.jobTitle',
          'employee.work.workName'
        ],
        // 查询字段
        peopleFilter: {
          'employee.department.id': { label: '部门', placeholder: '请选择部门', type: 'select', arr: this.dptList },
          'employee.work.id': { label: '工种', placeholder: '请选择工种', type: 'select', arr: this.workList },
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
          keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
        },
        dptList: [],
        jobList: [],
        // 删除的id
        deleteList: {
          id: ''
        },
        carKeyList: [
          'car.plateNumber',
          'car.carType',
          'car.rfid'
        ],
        // 查询字段
        carTopFilter: {
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
          keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
        },
      }
    },
    mounted() {
      this.threeList()
    },
    methods: {
      // 部门
      async dptHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await department('post', obj, false)
          if (res.code === 200) {
            this.dptList = []
            res.data.items.map(item => {
              this.dptList.push({
                label: item.deptName,
                value: item.id
              })
            })
          }
        } catch (err) {
          this.dptList = []
        }
      },
      // 工种
      async workHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await work('post', obj, false)
          if (res.code === 200) {
            this.workList = []
            res.data.items.map(item => {
              this.workList.push({
                label: item.workName,
                value: item.id
              })
            })
          }
        } catch (err) {
          this.workList = []
        }
      },
      // 查询部门，员工
      async threeList() {
        await this.dptHandler()
        await this.workHandler()
        this.$nextTick(() => {
          this.peopleFilter['employee.department.id'] = {
            label: '部门',
            placeholder: '请选择员工部门',
            type: 'select',
            arr: this.dptList
          }
          this.peopleFilter['employee.work.id'] = {
            label: '工种',
            placeholder: '请选择工种',
            type: 'select',
            arr: this.workList
          }
        })
      },
      deleHandle(value) {
        this.deleteList = value
      },
      // 批量删除
      batchDeletion() {
        this.$_delConfirm('选中进出场记录', () => {
          this.delRowReq(this.deleteList)
        })
      },
      async delRowReq(row) {
        try {
          const obj = { id: row.id, value: null }
          await tunnelIORecord('delete', obj, true)
          row.loadingDel = false
          this.$refs.componentRef.getList(this.serchObj)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          this.$message.error('删除失败！')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__header {
    margin: 0 0;
  }
</style>
